<template>
  <ul
    class="flex h-14 min-w-full gap-2 overflow-auto border-b border-gray-200 p-2"
  >
    <li
      class="group/item relative flex h-full cursor-pointer items-center whitespace-nowrap rounded-xl border px-2 transition-all"
      :class="
        route.path === task.routerPath
          ? 'border-[#32c79090] bg-[#32c79020]'
          : 'bg-gray-100'
      "
      v-for="task in taskList"
      :key="task.name"
      @click="router.push(task.routerPath)"
    >
      <span
        class="mx-3 flex-1 text-center transition-all group-hover/item:-translate-x-[6px]"
      >
        {{ task.name }}
      </span>

      <button
        class="absolute right-1 rounded-full border border-transparent opacity-0 transition-all group-hover/item:opacity-100"
        @click.stop="remove(task)"
      >
        <svg width="18" height="18" viewBox="0 0 64 64">
          <path
            d="M20 20C29.3726 29.3726 34.6274 34.6274 44 44M44 20C34.6274 29.3726 29.3726 34.6274 20 44"
            stroke="currentColor"
            stroke-width="4"
            stroke-linecap="round"
            fill="none"
          />
        </svg>
      </button>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { useTaskStore } from '@/store/index.ts'
import { useRoute, useRouter } from 'vue-router'
import { ToolType } from '@/types/tools.ts'
// import { CloseOutlined } from '@ant-design/icons-vue'

const taskStore = useTaskStore()
const { taskList } = taskStore

const route = useRoute()
const router = useRouter()

function remove(task: ToolType) {
  let idx = taskList.findIndex((item) => item.name === task.name)
  taskStore.removeTask(task)
  if (idx === 0) {
    if (taskList.length > 0) {
      router.replace(taskList[idx].routerPath)
    } else {
      router.replace('/toolbox')
    }
  } else {
    router.replace(taskList[idx - 1].routerPath)
  }
}
</script>

<style scoped></style>
